<template>
  <div class="demo">
    <div class="demo-title">RadioGroup 组合 - 配置方式</div>
    <div class="demo-content">
      <Space direction="vertical">
        <Radio.Group v-model:value="value1" :options="plainOptions" />
        <Radio.Group v-model:value="value2" :options="optionsWithDisabled" />
        <Radio.Group v-model:value="value3" :options="plainOptions" disabled />
        <Radio.Group v-model:value="value1" option-type="button" :options="plainOptions" />
        <Radio.Group v-model:value="value2" option-type="button" :options="optionsWithDisabled" />
        <Radio.Group v-model:value="value3" option-type="button" :options="plainOptions" disabled />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Space from '@sscd/space';
  import Radio from '@sscd/radio';
  import type { RadioGroupProps } from '@sscd/radio';
  const plainOptions = ['Apple', 'Pear', 'Orange'];
  const optionsWithDisabled: RadioGroupProps['options'] = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange', disabled: true },
  ];
  const value1 = ref<string>('Apple');
  const value2 = ref<string>('Apple');
  const value3 = ref<string>('Apple');
</script>
